import 'package:flutter/material.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.dart';

import '../../components/custom_float_button/custom_float_button.dart';

class NavigationBarIndividualPage extends StatefulWidget {
  const NavigationBarIndividualPage({super.key});

  @override
  State<NavigationBarIndividualPage> createState() => _NavigationBarIndividualPageState();
}

class _NavigationBarIndividualPageState extends State<NavigationBarIndividualPage> {
  int _index = 0;

  var renderOverlay = false;
  var visible = true;
  var switchLabelPosition = false;
  var extend = false;
  var mini = false;
  var rmicons = false;
  var customDialRoot = false;
  var closeManually = false;
  var useRAnimation = false;
  var isDialOpen = ValueNotifier<bool>(false);
  var speedDialDirection = SpeedDialDirection.up;
  var buttonSize = const Size(56.0, 56.0);
  var childrenButtonSize = const Size(56.0, 56.0);
  var selectedfABLocation = FloatingActionButtonLocation.endDocked;
  var items = [
    FloatingActionButtonLocation.startFloat,
    FloatingActionButtonLocation.startDocked,
    FloatingActionButtonLocation.centerFloat,
    FloatingActionButtonLocation.endFloat,
    FloatingActionButtonLocation.endDocked,
    FloatingActionButtonLocation.startTop,
    FloatingActionButtonLocation.centerTop,
    FloatingActionButtonLocation.endTop,
  ];

  final wants = [
    'i5-12600kf',
    '华硕[天选D5]B760M',
    '宏碁D5凌霜系16G×2',
    '显卡'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("NavigationBarIndividual Demo")),
      body: Center(
        child: Text(
          "玛卡巴卡 \n"
          '${_index == 3 ? '不要' : '想要'}${wants[_index]}'
        )
      ),
      floatingActionButton: CustomFloatButton(
        // animatedIcon: AnimatedIcons.menu_close,
        // animatedIconTheme: IconThemeData(size: 22.0),
        // / This is ignored if animatedIcon is non null
        // child: Text("open"),
        // activeChild: Text("close"),
        icon: Icons.add,
        activeIcon: Icons.close,
        spacing: 3,
        mini: mini,
        openCloseDial: isDialOpen,
        childPadding: const EdgeInsets.all(5),
        spaceBetweenChildren: 4,
        dialRoot: customDialRoot
            ? (ctx, open, toggleChildren) {
                return ElevatedButton(
                  onPressed: toggleChildren,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blue[900],
                    padding: const EdgeInsets.symmetric(
                        horizontal: 22, vertical: 18),
                  ),
                  child: const Text(
                    "Custom Dial Root",
                    style: TextStyle(fontSize: 17),
                  ),
                );
              }
            : null,
        buttonSize:
            buttonSize, // it's the SpeedDial size which defaults to 56 itself
        // iconTheme: IconThemeData(size: 22),
        label: extend
            ? const Text("Open")
            : null, // The label of the main button.
        /// The active label of the main button, Defaults to label if not specified.
        activeLabel: extend ? const Text("Close") : null,

        /// Transition Builder between label and activeLabel, defaults to FadeTransition.
        // labelTransitionBuilder: (widget, animation) => ScaleTransition(scale: animation,child: widget),
        /// The below button size defaults to 56 itself, its the SpeedDial childrens size
        childrenButtonSize: childrenButtonSize,
        visible: visible,
        direction: speedDialDirection,
        switchLabelPosition: switchLabelPosition,

        /// If true user is forced to close dial manually
        closeManually: closeManually,

        /// If false, backgroundOverlay will not be rendered.
        renderOverlay: renderOverlay,
        // overlayColor: Colors.black,
        // overlayOpacity: 0.5,
        onOpen: () => debugPrint('OPENING DIAL'),
        onClose: () => debugPrint('DIAL CLOSED'),
        useRotationAnimation: useRAnimation,
        tooltip: 'Open Speed Dial',
        heroTag: 'speed-dial-hero-tag',
        // foregroundColor: Colors.black,
        // backgroundColor: Colors.white,
        // activeForegroundColor: Colors.red,
        // activeBackgroundColor: Colors.blue,
        elevation: 8.0,
        animationCurve: Curves.elasticInOut,
        isOpenOnStart: false,
        shape: customDialRoot
            ? const RoundedRectangleBorder()
            : const StadiumBorder(),
        // childMargin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        children: [
          SpeedDialChild(
            child: !rmicons ? const Icon(Icons.accessibility) : null,
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
            label: '11111',
            onTap: () {
              debugPrint('Colors.red');
              setState(() {
                _index = 0;
              });
              isDialOpen.value = false;
            },
            onLongPress: () => debugPrint('FIRST CHILD LONG PRESS'),
          ),
          SpeedDialChild(
            child: !rmicons ? const Icon(Icons.brush) : null,
            backgroundColor: Colors.green,
            foregroundColor: Colors.white,
            label: '22222',
            onTap: () {
              debugPrint('Colors.green');
              setState(() {
                _index = 1;
              });
              isDialOpen.value = false;
            },
          ),
          SpeedDialChild(
            child: !rmicons ? const Icon(Icons.margin) : null,
            backgroundColor: Colors.blue,
            foregroundColor: Colors.white,
            label: '33333',
            visible: true,
            onTap: () {
              debugPrint('Colors.blue');
              setState(() {
                _index = 2;
              });
              isDialOpen.value = false;
            },
            onLongPress: () => debugPrint('THIRD CHILD LONG PRESS'),
          ),
          SpeedDialChild(
            child: !rmicons ? const Icon(Icons.accessibility) : null,
            backgroundColor: Colors.orange,
            foregroundColor: Colors.white,
            label: '44444',
            onTap: () {
              debugPrint('Colors.orange');
              setState(() {
                _index = 3;
              });
              isDialOpen.value = false;
            },
            onLongPress: () => debugPrint('FIRST CHILD LONG PRESS'),
          ),
        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child:  Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Expanded(
              child: IconButton(
                icon: const Icon(Icons.home),
                tooltip: '首页',
                color: _index == 0 ?
                      Colors.blue :
                      Colors.blue.withOpacity(0.6),
                onPressed: () {
                  setState(() {
                    //手动赋值索引
                    _index = 0;
                  });
                },
              ),
            ),
            Expanded(
              child: IconButton(
                icon: const Icon(Icons.email),
                tooltip: '邮件',
                color:  _index == 1 ?
                      Colors.blue :
                      Colors.blue.withOpacity(0.6),
                onPressed: () {
                  setState(() {
                    _index = 1;
                  });
                },
              ),
            ),
            const Spacer(),
            Expanded(
              child: IconButton(
                icon: const Icon(Icons.av_timer),
                tooltip: '⏲',
                color:  _index == 2 ?
                      Colors.blue :
                      Colors.blue.withOpacity(0.6),
                onPressed: () {
                  setState(() {
                    _index = 2;
                  });
                },
              ),
            ),
            Expanded(
              child: IconButton(
                icon: const Icon(Icons.dashboard),
                tooltip: '组件',
                color:  _index == 3 ?
                      Colors.blue :
                      Colors.blue.withOpacity(0.6),
                onPressed: () {
                  setState(() {
                    _index = 3;
                  });
                },
              ),
            )
          ],
        )
      ),
    );
  }
}